<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【且行且思】中国精神谱</title>
    <link rel="stylesheet" href="index.css">
    <link rel="shortcut icon" href="images/team_logo.ico">

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?75065be91b1cc5aa73d0cfe2f9c9a1df";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body>
    <!-- 头部区域 -->
    <div class="header w">
        <div class="teamlogo">
            <img src="images/team_logo.jpg" alt="行思团徽" class="teamimg">
        </div>
        <!-- 侧边二维码模块 -->
        <div class="r_display">
            二维码
            <div class="r_nav">
                <div class="r_dj">
                    <span class="char">欢迎关<br>注行思公众<br>号、视频号、<br>微博~</span>
                    <!-- <span class="char">欢迎关注行思公众号、视频号、微博~</span> -->
                </div>
                <ul class="r_con">
                    <li class="r_code">
                        <img src="images/二维码.png" alt="" class="img1">
                        <img src="images/二维码2.png" alt="" class="img2">
                        <img src="images/二维码3.png" alt="" class="img3">
                        <img src="images/二维码4.png" alt="" class="img4">
                    </li>
                    <li class="r_burst">
                        <a href=""></a>
                        <div class="r_assBg">

                        </div>
                    </li>
                    <li class="r_wc_gzh">
                        <div class="r_assBg"></div>
                    </li>
                    <li class="r_wc_sph">
                        <div class="r_assBg"></div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 导航栏nav部分 -->
        <!-- <div> -->
        <ul class="nav">
            <li><a href="index.html">首页</a></li>
            <li>
                <a href="#">团队介绍</a>
                <ul class="menu1">

                    <li><a href="https://mp.weixin.qq.com/s/be2h0II3AFb8tFM_UnVPwQ">绿江源</a></li>
                    <li><a href="https://mp.weixin.qq.com/s/yLXSVfwX5eTPFWLWiCVtbg">沂蒙</a></li>
                    <li><a href="#">疫行</a></li>
                    <li><a href="https://mp.weixin.qq.com/s/hgCjrRQvvaQZ1VGavxDs7A">红贝壳</a></li>
                    <li><a href="https://mp.weixin.qq.com/s/PXLF4Dds9mK4BFwmRWDOeA">牧歌</a></li>
                    <li>
                        <a href="#">江南迹忆</a>
                        <ul class="intro">
                            <li><a href="https://mp.weixin.qq.com/s/CAdrSD_em05qA2RaawrRLQ">上海-浙江小队</a></li>
                            <li><a href="https://mp.weixin.qq.com/s/aIcre6Lt6abrO40hIfdSBA">南京分队</a></li>
                            <li><a href="https://mp.weixin.qq.com/s/Ng2jkPkJhnmWBywcNik_ug">湖南小队</a></li>
                            <li><a href="https://mp.weixin.qq.com/s/ffI49m57Bmrwgi9ElV7jxw">厦门小队</a></li>
                        </ul>
                    </li>


                </ul>
            </li>
            <li><a href="pages\teamactivity.html">团队活动</a></li>
            <li><a href="pages\xingsifengcai.html">行思风采</a></li>
            <li><a href="https://mp.weixin.qq.com/s/qp2DQrz54NP3iDixoAnYEg">稿件征集</a></li>
            <li><a href="pages\cooperation.html">合作交流</a></li>
        </ul>
        <!-- </div> -->
    </div>
    <!-- banner模块 -->
    <div class="banner">
        <div class="w">
            <div id='main'>
                <div class="subnav">
                    <ul>
                        <li><a href="teams\lvjiangyuan.html">绿 江 源 <span> &gt;
                                </span>
                            </a>
                        </li>
                        <li><a href="teams\jiangnanjiyi.html">江 南 迹 忆 <span> &gt;
                                </span>
                            </a>
                        </li>
                        <li><a href="teams\yimengwenhua.html">沂 蒙 <span> &gt;
                                </span>
                            </a>
                        </li>
                        <li><a href="teams\yixing.html">疫 行 <span> &gt; </span>
                            </a>
                        </li>
                        <li><a href="teams\hongbeike.html">红 贝 壳 <span> &gt; </span>
                            </a>
                        </li>
                        <li><a href="teams\muge.html">牧 歌 <span> &gt; </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 轮播图 -->
                <!--最大的div，是为了做为一个轮播图所需元素的容器-->

                <!--轮播图片区   在取名时，因为各有所长(分别取名slide1-5)，有共有特性(banner-slide)，所以，取多个类名-->
                <div id='banner_2'>
                    <!--图1-->
                    <a href="">
                        <div class='banner-slide  slide1 slide-active'> </div>
                    </a>
                    <!--图2-->
                    <a href="">
                        <div class='banner-slide  slide2'> </div>
                    </a>
                    <!--图3-->
                    <a href="">
                        <div class='banner-slide  slide3'> </div>
                    </a>
                    <!--图4-->
                    <a href="">
                        <div class='banner-slide  slide4'> </div>
                    </a>
                    <!--图5-->
                    <a href="">
                        <div class='banner-slide  slide5'> </div>
                    </a>
                </div>
                <!--移动数字绑定图片
			    必然的是，和图片数量是对等的-->
                <div class="dots">
                    <ul id='dots'>
                        <li class="li1"> </li>
                        <li> </li>
                        <li> </li>
                        <li> </li>
                        <li> </li>
                    </ul>
                </div>
                <!--
					上、下一张按钮
				-->
                <div id="left-right">
                    <div class="move" id="prev">&lsaquo;</div>
                    <div class="move" id="next">&rsaquo;</div>
                </div>

                <!-- 轮播图结束 -->
                <!-- hottopic模块 -->
                <div class="hottopic">
                    <h2>今日热门话题</h2>
                    <div class="bd">
                        <ul>
                            <li>
                                <a href="https://mp.weixin.qq.com/s/0BnLjDFlqBq2K9OXPKc4nw">
                                    <h4>行思知言</h4>
                                    <p>第一期 恰同学少年</p>
                                </a>
                            </li>
                            <li>
                                <a href="https://mp.weixin.qq.com/s/9Jwj_0VtfaYaVHOQJjNjQg">
                                    <h4>团课</h4>
                                    <p>第二期 沂蒙专访</p>
                                </a>
                            </li>
                            <li>
                                <a href="https://mp.weixin.qq.com/s/VLCZEeF5S8oJpn9gG2rzlQ">
                                    <h4>连载</h4>
                                    <p>第五弹 藏孤</p>
                                </a>
                            </li>
                        </ul>
                        <a href="pages\teamactivity.html" class="moreHighlights">更多内容</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 推荐模块 -->
    <div class="recommend w">
        <h3> 行思 </h3>
        <ul>
            <li><a href="">故事</a></li>
            <li><a href="">感悟</a></li>
            <li><a href="">记录</a></li>
            <li><a href="">介绍</a></li>
            <li><a href="" class="right_end_border">分享</a></li>
        </ul>
    </div>
    <!-- 公告模块 -->
    <div class="bulletin">
        <div class="news_left">
            <div class="news_title">
                <div class="img_on_left">
                    <img src="images/xinwen.png" alt="新闻">
                </div>
                <div class="current_events">
                    <span class="news_title1">
                        新闻
                    </span>
                    <span class="news_title2">
                        动态
                    </span>
                    <span class="news_title3">
                        NEWS
                    </span>
                </div>
            </div>
            <div class="news_headline">
                <a href="https://mp.weixin.qq.com/s/0BnLjDFlqBq2K9OXPKc4nw">
                    <div class="headline_content">
                        <h3>【行思知言】第一期——恰同学少年</h3>
                        <div class="main_body">
                            <p>行思文化寻访实践团，立足实践、追思历史、展望未来——通过调研、整理、体悟、践行中国人民和中国共产党谱就的伟大……</p>
                            <div class="main_body_div">[详情]</div>
                        </div>
                    </div>
                    <div class="headline_img">
                        <img src="images/recommend/recommend2.png" alt="">
                    </div>
                </a>
            </div>
            <div class="news_lists clearfix">
                <ul class="clearfix">
                    <li>
                        <a href="https://mp.weixin.qq.com/s/Q7bZoKd3s7gHdC31LgsIeg">
                            <img src="images/dian.png" alt="点">历史的见证者——鸭绿江断桥
                            <span>8-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://mp.weixin.qq.com/s/OxhLbwSC5j6GOlzJ_qiTUA">
                            <img src="images/dian.png" alt="点">8.19小采访
                            <span>8-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://mp.weixin.qq.com/s/cWaiVzjwSK7z5oVvPWmM_w">
                            <img src="images/dian.png" alt="点">牧歌的戏剧艺术寻访之旅
                            <span>8-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://mp.weixin.qq.com/s/fmF6ZVh1b3dLsv8D59jagw">
                            <img src="images/dian.png" alt="点">倒下去的身躯，永不朽的精神
                            <span>8-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://mp.weixin.qq.com/s/f9Ltz_tb5-tRv4t7-CJPqg">
                            <img src="images/dian.png" alt="点">从古田会议探索福建古田
                            <span>8-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://mp.weixin.qq.com/s/OnxZWgMDkY_DM-TgLlxX6A">
                            <img src="images/dian.png" alt="点">志愿者采访实录
                            <span>8-19</span>
                        </a>
                    </li>
                </ul>
                <div class="news_detail"><a href="#">[详情]</a></div>
            </div>
        </div>
        <!-- <div class=" news_right">
        </div> -->
        <!-- 以下是右边通知栏的内容 -->
        <div class="news_right">
            <div class="news_title2">
                <img src="images/tongzhi.jpg" alt="tongzhi">
                <div class="character1">通知</div>
                <div class="character2">公告</div>
                <div class="character3">NOTICE</div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div class="content_right">
                <ul>
                    <li>
                        <span>公告</span>
                        <a href="#" class="notification">
                            咱们来一个点赞计划六个队伍队长各选一个宣传成果发群里，视频推送balabala都可以<br />
                            大家#互相帮助，即使不看，也把这六个东西点赞了刷到100+！！！
                        </a>
                    </li>
                    <li>
                        <span>公告</span>
                        <a href="#" class="notification">
                            <!-- 占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符
                            占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符
                            占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符 -->
                        </a>
                    </li>

                </ul>
            </div>
        </div>
        <!-- </div> -->
    </div>

    <!-- 核心内容区域 -->
    <div class="box w">
        <div class="box-hd">
            <h3>内容中心</h3>
            <a href="">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <a href="https://mp.weixin.qq.com/s/QYckzVPbswAf2yb3lv61iQ">
                        <img src="images/recommend/recommend1.png" alt="">
                        <h4>【且行且思】</h4>
                        <div class="info">
                            <span>献礼</span>
                            建党百年
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://mp.weixin.qq.com/s/0BnLjDFlqBq2K9OXPKc4nw">
                        <img src="images/recommend/recommend2.png" alt="">
                        <h4>【行思知言】</h4>
                        <div class="info">
                            <span>第一期</span>
                            恰同学少年
                        </div>
                    </a>
                </li>

                <li>
                    <a href="https://mp.weixin.qq.com/s/9Jwj_0VtfaYaVHOQJjNjQg">
                        <img src="images/recommend/recommend3.png" alt="">
                        <h4>【团课】</h4>
                        <div class="info">
                            <span>第二期</span>
                            我们用最“专业”的团队，做最严肃的节目！
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://mp.weixin.qq.com/s/XnTTTtgYL9sLzYk0PQ-AoQ">
                        <img src="images/recommend/recommend4.png" alt="">
                        <h4>【采访】</h4>
                        <div class="info">
                            <span>红贝壳</span>
                            小采访
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://mp.weixin.qq.com/s/VLCZEeF5S8oJpn9gG2rzlQ">
                        <img src="images/recommend/recommend5.png" alt="">
                        <h4>【连载】</h4>
                        <div class="info">
                            <span>第五弹</span>
                            藏 孤
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://mp.weixin.qq.com/s/sDuNaENJb4KXP-t49nJAqQ">
                        <img src="images/recommend/recommend6.png" alt="">
                        <h4>【团课】</h4>
                        <div class="info">
                            <span>第一期</span>
                            泪目！翻开老兵们的战争岁月，边看边哭......
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://mp.weixin.qq.com/s/EXLeDnnJoXe2AzJazx3oKQ">
                        <img src="images/recommend/recommend7.jpg" alt="">
                        <h4>【行思疫行】</h4>
                        <div class="info">
                            <span>行思</span>
                            志愿者采访实录
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://mp.weixin.qq.com/s/DrTZk6knWSqoFipQY3505A">
                        <img src="images/recommend/recommend8.png" alt="">
                        <h4>【总结】</h4>
                        <div class="info">
                            <span>行思</span>
                            实践中期总结
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://mp.weixin.qq.com/s/Q7bZoKd3s7gHdC31LgsIeg">
                        <img src="images/recommend/recommend9.png" alt="">
                        <h4>【故事】</h4>
                        <div class="info">
                            <span>行思</span>
                            抗美援朝沧桑历史的见证者——鸭绿江断桥
                        </div>
                    </a>
                </li>
                <li>
                    <a href="https://mp.weixin.qq.com/s/Exs_WNrZIAewltOEhs-bIg">
                        <img src="images/recommend/recommend10.png" alt="">
                        <h4>【故事】</h4>
                        <div class="info">
                            <span>行思</span>
                            抗日名将张中华 文武双全震敌胆
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- footer模块 -->
    <div class="footer">
        <div class="w">
            <div class="left">
                <img src="images/team_logo.jpg" alt="行思团徽">
            </div>
            <div class="copyright">
                <p>联系电话：xxxxxxxxxxx</p>
                <p>邮箱地址：xxxxxxxxx@xx.com</p>
                <p>联系地址：学院路30号北京科技大学</p>
                <p>邮编：100083</p>
            </div>
            <div class="links">
                <dl>
                    <dt>关于我们</dt>
                    <dd><a href="https://mp.weixin.qq.com/s/km_BGaYnJP6OAievMKMXkA">实践团介绍</a></dd>
                    <dd><a href="pages\teamactivity.html">实践活动</a></dd>
                    <dd><a href="pages\xingsifengcai.html">风采展示</a></dd>
                </dl>

                <dl>
                    <dt>关注我们</dt>
                    <dd><a href="#">新浪微博</a></dd>
                    <dd><a href="#">微信公众号</a></dd>
                    <dd><a href="#">直播间</a></dd>
                </dl>

                <dl class="dl-end">
                    <dt>特色内容</dt>
                    <dd><a href="#">线上直播</a></dd>
                    <dd><a href="#">革命故事</a></dd>
                    <dd><a href="#">调查研究</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer-down">
        <div class="logo">
            <!-- <img src="images/footer_logo.png" alt=""> -->
        </div>
    </div>

    <script type="text/javascript" src="index.js"></script>
    <script>
        var nav = document.querySelector('.nav');
        var menu1 = nav.children;
        for (let i = 0; i < menu1.length; i++) {
            menu1[i].onmouseover = function () {
                this.children[1].style.display = 'block';
            }
            menu1[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
        var menu2 = document.querySelector('.menu1');
        var jiangnan = menu2.children;
        for (let g = 0; g < jiangnan.length; g++) {
            jiangnan[g].onmouseover = function () {
                this.children[1].style.display = 'block';
            }
            jiangnan[g].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
        var rcode = document.querySelector('.r_code');
        var rcon = document.querySelector('.r_con');
        var lis = rcon.children;
        var imgs = rcode.children;
        var img2 = document.querySelector('.img2');

        for (let k = 1; k < lis.length; k++) {
            lis[k].onmouseover = function () {
                for (var j = 0; j < imgs.length; j++) {
                    imgs[j].style.display = 'none';
                }
                // if (k == 1) {
                //     imgs[1].style.display = 'block'
                // }
                // if (k == 2) {
                //     imgs[2].style.display = 'block';
                // }
                // if (k == 3) {
                //     imgs[3].style.display = 'block';
                // }
                imgs[k].style.display = 'block';
            }
            lis[k].onmouseout = function () {
                // imgs[i - 1].style.display = 'none';
                for (var j = 0; j < imgs.length; j++) {
                    imgs[j].style.display = 'none';
                }
                imgs[0].style.display = 'block';
            }
        }

        // var rnav = document.querySelector('.r_nav');
        // var banner = document.querySelector('.banner');
        // var bannerOffset = banner.offsetTop;
        // document.addEventListener('scroll', function () {
        //     if (window.pageYOffset >= 400) {
        //         rnav.style.position = 'fixed';
        //         rnav.style.top = '300px';
        //     }
        //     else {
        //         rnav.style.position = 'absolute';
        //         rnav.style.top = '700px';
        //     }
        // })

        var rnavv = document.querySelector('.r_nav');
        // rnavv.style.display = 'block'
        var rdisplay = document.querySelector('.r_display');
        var char = document.querySelector('.char');
        rdisplay.onmouseover = function () {
            rnavv.style.display = 'block';
            // char.style.display = 'inline';
        }
        rdisplay.onmouseout = function () {
            rnavv.style.display = 'none';
        }
    </script>

</body>

</html>